<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>平台财务管理</el-breadcrumb-item>
        <el-breadcrumb-item>充值管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <div style="padding-bottom: 0px;margin-left: 50px;margin-top: 10px;">
    <el-col :span="12">
      <div id="gauge" style="width:100%; height:500px;"></div>
    </el-col>
    <el-col :span="24"  style="padding-bottom: 10px;margin-left: 100px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-switch v-model="filters.flag" active-color="#13ce66"
                     inactive-color="#ff4949" active-text="扫块开启" inactive-text="扫块关闭"  @click="updateHeight">
          </el-switch>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="12" style="padding-bottom: 0px;margin-left: 100px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.blockHeight" placeholder=当前高度值 style="min-width: 20px;" @keyup.enter.native="updateHeight"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateHeight">回退高度</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    </div>
  </el-row>
</template>
<script>
  import echarts from 'echarts'
  import API from '../../api/api_finance';
  export default{
    data(){
      return {
        filters: {
          blockHeight:0,
          flag:true
        },
        loading: false,
        blockHeightTx:0,
        height:0,
      }
    },
    methods: {
      handleSearch(){
        this.total = 0;
        this.page = 1;
        this.search();
        this.drawGauge(this.height,this.blockHeightTx);
      },
      search(){
        let that = this;
        let params = {
        };
        that.loading = true;
        API.getWalletHeight(params).then(function (result) {
          that.loading = false;
          if (result.code===200) {
              that.filters.flag=result.data.flag;
              that.filters.blockHeight=result.data.blockHeight;
              that.drawGauge(result.data.blockHeight,result.data.blockHeightTx);
          }
        }, function (err) {
          that.loading = false;
          that.$message.error({showClose: true, message: err.toString(), duration: 2000});
        }).catch(function (error) {
          that.loading = false;
          console.log(error);
          that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
        });
      },
      updateHeight(){
        let that = this;
        let params = {
          flag : this.filters.flag,
          blockHeight : this.filters.blockHeight
        };
        that.loading = true;
        API.updateWalletHeight(params).then(function (result) {
          that.loading = false;
          if (result.code===200) {
            that.$message.success({showClose: true, message: '修改成功', duration: 2000});
            that.search();
          }
        }, function (err) {
          that.loading = false;
          that.$message.error({showClose: true, message: err.toString(), duration: 2000});
        }).catch(function (error) {
          that.loading = false;
          console.log(error);
          that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
        });
      },
      drawGauge:function (height,blockHeightTx){
        this.gauge = echarts.init(document.getElementById('gauge'));
        this.gauge.setOption({
          tooltip : {
            formatter: "{a} <br/>{c} {b}"
          },
          toolbox: {
            show: true,
            feature: {
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          series : [
            {
              name: '扫块高度',
              type: 'gauge',
              z: 3,
              min: 0,
              max: 220,
              splitNumber: 11,
              radius: '50%',
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 10
                }
              },
              axisTick: {            // 坐标轴小标记
                length: 15,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
              },
              splitLine: {           // 分隔线
                length: 20,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              axisLabel: {
                backgroundColor: 'auto',
                borderRadius: 2,
                color: '#eee',
                padding: 3,
                textShadowBlur: 2,
                textShadowOffsetX: 1,
                textShadowOffsetY: 1,
                textShadowColor: '#222'
              },
              title : {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 20,
                fontStyle: 'italic'
              },
              detail : {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                formatter: function (value) {
                  value = (value + '').split('.');
                  value.length < 2 && (value.push('00'));
                  return ('00' + value[0]).slice(-2)
                    + '.' + (value[1] + '00').slice(0, 2);
                },
                fontWeight: 'bolder',
                borderRadius: 3,
                backgroundColor: '#444',
                borderColor: '#aaa',
                shadowBlur: 5,
                shadowColor: '#333',
                shadowOffsetX: 0,
                shadowOffsetY: 3,
                borderWidth: 2,
                textBorderColor: '#000',
                textBorderWidth: 2,
                textShadowBlur: 2,
                textShadowColor: '#fff',
                textShadowOffsetX: 0,
                textShadowOffsetY: 0,
                fontFamily: 'Arial',
                width: 100,
                color: '#eee',
                rich: {}
              },
              data:[{value: height, name: '高度'}]
            },
            {
              name: '链上高度',
              type: 'gauge',
              center: ['20%', '55%'],    // 默认全局居中
              radius: '35%',
              min:0,
              max:7,
              endAngle:45,
              splitNumber:7,
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 8
                }
              },
              axisTick: {            // 坐标轴小标记
                length:12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
              },
              splitLine: {           // 分隔线
                length:20,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer: {
                width:5
              },
              title: {
                offsetCenter: [0, '-30%'],       // x, y，单位px
              },
              detail: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder'
              },
              data:[{value: blockHeightTx, name: '高度'}]
            },
            {
              name: '比特币高度',
              type: 'gauge',
              center: ['77%', '50%'],    // 默认全局居中
              radius: '25%',
              min: 0,
              max: 2,
              startAngle: 135,
              endAngle: 45,
              splitNumber: 2,
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 8
                }
              },
              axisTick: {            // 坐标轴小标记
                splitNumber: 5,
                length: 10,        // 属性length控制线长
                lineStyle: {        // 属性lineStyle控制线条样式
                  color: 'auto'
                }
              },
              axisLabel: {
                formatter:function(v){
                  switch (v + '') {
                    case '0' : return 'E';
                    case '1' : return 'Gas';
                    case '2' : return 'F';
                  }
                }
              },
              splitLine: {           // 分隔线
                length: 15,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer: {
                width:2
              },
              title : {
                show: false
              },
              detail : {
                show: false
              },
              data:[{value: height, name: 'gas'}]
            },
            {
              name: '水表',
              type: 'gauge',
              center : ['77%', '50%'],    // 默认全局居中
              radius : '25%',
              min: 0,
              max: 2,
              startAngle: 315,
              endAngle: 225,
              splitNumber: 2,
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 8
                }
              },
              axisTick: {            // 坐标轴小标记
                show: false
              },
              axisLabel: {
                formatter:function(v){
                  switch (v + '') {
                    case '0' : return 'H';
                    case '1' : return 'Water';
                    case '2' : return 'C';
                  }
                }
              },
              splitLine: {           // 分隔线
                length: 15,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer: {
                width:2
              },
              title: {
                show: false
              },
              detail: {
                show: false
              },
              data:[{value: height, name: 'gas'}]
            }
          ]
        });
      },
    },
    mounted() {
      this.handleSearch();
    }
  }
</script>

<style>
  .demo-table-expand label {
    font-weight: bold;
  }
</style>
